---
title: Resizing Programmatically
description: Programmatically resize the bottom sheet and listen for detent changes.
keywords: [bottom sheet resizing, bottom sheet detents, bottom sheet auto resizing]
---

import resizing from './resizing.gif'

`TrueSheet` has a main prop called [`detents`](/reference/configuration#detents) which allows you to define the detents that the sheet can support. This is an array of [`SheetDetent`](/reference/types#sheetdetent) that supports values like `"auto"` or fractional numbers (0-1).

In some cases, you may want to resize the sheet programmatically for a better experience.

<img alt="resizing" src={resizing} width="300"/>

## How?

### Resize Programmatically

Define the sheet and use the [`resize`](/reference/methods#resize) method.

```tsx {2-2,6-6,11-13}
const App = () => {
  const sheet = useRef<TrueSheet>(null)

  const resize = async () => {
    // Resize to 69%
    await sheet.current?.resize(1)
    console.log('Yay, we are now at 69% 💦')
  }

  return (
    <TrueSheet name="resizing-sheet" ref={sheet} detents={['auto', 0.69, 1]}>
      <Button onPress={resize} title="Resize" />
    </TrueSheet>
  )
}
```

:::tip
You can also do it globally using the related [global method](/reference/methods#global-methods).

```tsx
TrueSheet.resize('resizing-sheet', 1)
```
:::

:::info
`detents` can only support up to 3 detents. **_collapsed_**, **_half-expanded_**, and **_expanded_**.
:::

:::info
Use [`insetAdjustment="never"`](/reference/configuration#insetadjustment) to disable automatic bottom inset adjustment on both platforms.
:::

:::tip
If you want to disable user dragging and only allow programmatic resizing, set [`draggable={false}`](/reference/configuration#draggable).
:::


### Listening to Detent Change

If you want to get the active detent information, you can listen to detent changes by providing the [`onDetentChange`](/reference/events#ondetentchange) event.

The event comes with the [`DetentInfoEventPayload`](/reference/types#detentinfoeventpayload) that provides the detent `index` and `position` (Y position on screen).

:::tip
Use the `index` to reference the detent from your `detents` array. For example, if `detents={['auto', 0.69, 1]}` and `index` is `1`, the active detent is `0.69`.
:::

```tsx {9-11,17-17}
const App = () => {
  const sheet = useRef<TrueSheet>(null)

  const resize = async () => {
    // Resize to 69%
    await sheet.current?.resize(1)
  }

  const handleDetentChange = (e: DetentChangeEvent) => {
    const { index, position } = e.nativeEvent
    console.log('Detent index:', index, 'position:', position) ✅
  }

  return (
    <TrueSheet
      ref={sheet}
      detents={['auto', 0.69, 1]}
      onDetentChange={handleDetentChange}
    >
      <Button onPress={resize} title="Resize" />
    </TrueSheet>
  )
}
```

:::info
The event will also trigger when the user drags the sheet into a detent.
:::
